<template>
  <div class="detail">
    <detail-navbar @changetabs="changetabs" ref="detailnavref"></detail-navbar>
    <bs-croll class="detailbs" ref="detailbsref" :probeType="3" @handlescroll="handlescroll">
      <Swiper :banners="topimgs" :isdetail="true"></Swiper>
      <detail-base-info :goods="goods"></detail-base-info>
      <detail-shop-info :shop="shop"></detail-shop-info>
      <detail-goods-info :detailInfo="detailInfo"></detail-goods-info>
      <detail-param-info ref="detailparamref" :paramInfo="paramInfo"></detail-param-info>
      <detail-commont-info ref="detailcommontref" :commentInfo="commentInfo"></detail-commont-info>
      <detail-list ref="recommendref" :goods="recommendlist"></detail-list>
    </bs-croll>
    <BackTop @totop="totop" v-show="isshowback"></BackTop>
    <detail-good-car @addtocar="addtocar"></detail-good-car>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useStore } from 'vuex'

import { useRoute } from 'vue-router'
import DetailNavbar from './comps/DetailNavbar.vue'
import Swiper from 'comps/common/swipe/Swiper.vue'
import DetailBaseInfo from './comps/DetailBaseInfo.vue'
import DetailShopInfo from './comps/DetailShopInfo'
import BsCroll from 'comps/common/bscroll/BsCroll.vue'
import DetailGoodsInfo from './comps/DetailGoodsInfo.vue'
import DetailParamInfo from './comps/DetailParamInfo.vue'
import BackTop from 'comps/content/backtop/BackTop.vue'
import DetailCommontInfo from './comps/DetailCommentInfo.vue'
import DetailList from 'comps/content/goods/GoodsList.vue'
import DetailGoodCar from './comps/DatailGoodCar.vue'

import { useBacktop } from '../../hooks/useBacktop'
import { getdetail, Goods, Shop, GoodsParam, getRecommend } from '../../server/detail'
export default {
  name: 'Datail',
  components: {
    DetailNavbar,
    Swiper,
    DetailBaseInfo,
    DetailShopInfo,
    DetailList,
    BsCroll,
    BackTop,
    DetailGoodsInfo,
    DetailParamInfo,
    DetailCommontInfo,
    DetailGoodCar
  },
  setup(props) {
    const route = useRoute()
    const store = useStore()
    const detailInfo = ref({})
    const topimgs = ref([])
    const goods = ref(null)
    const shop = ref(null)
    const recommendlist = ref([])
    const commentInfo = ref(null)
    const detailbsref = ref(null)
    const recommendref = ref(null)
    const detailparamref = ref(null)
    const detailgoodsref = ref(null)
    const detailcommontref = ref(null)
    const detailnavref = ref(null)
    const paramInfo = ref(null)
    const isshowbacktop = ref(false)
    // 获取详情数据
    getdetail(route.params.id).then((res) => {
      topimgs.value = res.result.itemInfo.topImages
      goods.value = new Goods(res.result.itemInfo, res.result.columns, res.result.shopInfo.services)
      shop.value = new Shop(res.result.shopInfo)
      paramInfo.value = new GoodsParam(res.result.itemParams.info, res.result.itemParams.rule)
      detailInfo.value = res.result.detailInfo
      commentInfo.value = res.result.rate.list[0]
    })
    // 获取推荐数据
    getRecommend().then((res) => {
      recommendlist.value = res.data.list
    })
    // 回到顶部
    const { totop, isshowback } = useBacktop(detailbsref)
    // 切换tabs切换对应的el
    const changetabs = (index) => {
      switch (index) {
        case 0:
          detailbsref.value.scorll.scrollTo(0, 0, 1000)
          break
        case 1:
          detailbsref.value.scorll.scrollToElement(detailparamref.value.$el, 100)
          break
        case 2:
          detailbsref.value.scorll.scrollToElement(detailcommontref.value.$el, 100)
          break
        case 3:
          detailbsref.value.scorll.scrollToElement(recommendref.value.$el, 100)
          break
        default:
          break
      }
    }
    // 监听对应的滚动事件
    const handlescroll = (y) => {
      detailbsref.value.scorll.refresh()
      if (y < detailparamref.value.$el.offsetTop) {
        detailnavref.value.currentindex = 0
      } else if (y < detailcommontref.value.$el.offsetTop) {
        detailnavref.value.currentindex = 1
      } else if (y < recommendref.value.$el.offsetTop) {
        detailnavref.value.currentindex = 2
      } else {
        detailnavref.value.currentindex = 3
      }
    }
    // 添加到购物车
    const addtocar = () => {
      const goodsobj = {}
      goodsobj.image = topimgs.value[0]
      goodsobj.title = goods.value.title
      goodsobj.desc = goods.value.desc
      goodsobj.price = goods.value.realPrice
      goodsobj.iid = route.params.id
      store.commit('car/addgoods', goodsobj)
    }
    return {
      detailInfo,
      topimgs,
      goods,
      shop,
      recommendlist,
      paramInfo,
      commentInfo,
      isshowbacktop,
      isshowback,
      detailbsref,
      detailparamref,
      recommendref,
      detailgoodsref,
      detailcommontref,
      detailnavref,
      totop,
      changetabs,
      handlescroll,
      addtocar
    }
  }
}
</script>

<style lang="less" scoped>
.detail {
  position: relative;
  z-index: 99;
  background-color: #fff;
  .detailbs {
    height: calc(100vh - 44px - 50px);
    overflow: hidden;
  }
}
.detailnav {
  background-color: #fff;
  .left {
    width: 100%;
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    img {
      width: 30px;
      height: 30px;
    }
  }
}
</style>
